<template>
  <div>
    <h1>计数器</h1>
    <div>{{count}}</div>
    <button @click="increment">+同步</button>
  </div>
</template>

<script lang='ts'>
import {ref,reactive} from 'vue'
//1、先导入store对象
import useCounterStore from '../store/counter'
//2、从pinia中导入storeToRefs
import {storeToRefs} from 'pinia'
export default{
 setup(){
  //在setup函数中调用useCounterStore函数
  const store=useCounterStore()
  //将store中的count对象解构出来,这里必须通过storeToRefs来将store对象包一层，否则store数据就不是响应式数据
  const {count}=storeToRefs(store)
  const increment=():void=>{
    //通过store直接访问到actions中的increment方法
     store.increment()
  }
  return{
    count,
    increment
  }
 }
}
</script>

<style lang='scss' scoped>
</style>